<template>
<!-- 房屋添加 -->
    <div class="Addahouse">
         <!-- 添加房屋表头 -->
        <div class="AddCommunitytitle">
            <p @click="back">
                <i class="el-icon-arrow-left"></i>
                <span>物业通知发布</span>
            </p>
            <p>
                <span class="must">*</span>
                <span>为必填项</span>
            </p>
        </div>
        <!-- 房屋添加输入内容板块 -->
        <div class="Addahousecontent">
            <div class="middlecountent">
                <div class="payloader">
                    <p class="title">
                        <span class="starred">*</span>
                        <span class="text">选择小区：</span>
                    </p>
                    <el-select v-model="form.Belongingcommunity" placeholder="请选择小区" class="storeid">
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.label" >
                        </el-option>
                    </el-select>
                </div>
                 <div class="payloader">
                    <p class="title">
                        <span class="starred">*</span>
                        <span class="text">通知类型：</span>
                    </p>
                    <el-select v-model="form.Noticetype" placeholder="请选择通知类型" class="storeid">
                        <el-option
                        v-for="item in optionstype"
                        :key="item.value"
                        :label="item.label"
                        :value="item.label" >
                        </el-option>
                    </el-select>
                </div>
                <div class="payloader">
                    <p class="title">
                        <span class="starred">*</span>
                        <span class="text"> 通知标题：</span>
                    </p>
                    <el-input
                    placeholder="请输入通知标题"
                    v-model="form.NotificationTitle"
                    clearable class="countent">
                    </el-input>
                </div>
                <div class="payloaders">
                    <p class="title">
                        <span class="starred">*</span>
                        <span class="text">通知内容：</span>
                    </p>
                    <el-input
                        type="textarea"
                        placeholder="请输入通知内容"
                        v-model="form.Noticecount"
                        maxlength="300"
                        show-word-limit
                        class="textarea">
                    </el-input>
                </div>
                <!-- <div class="payloaders">
                    <p class="title">
                        <span class="starred"></span>
                        <span class="text">文件上传：</span>
                    </p>
                    <el-upload
                    class="upload-demo"
                    drag
                    action="https://jsonplaceholder.typicode.com/posts/"
                    multiple>
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text"><em>点击上传</em></div>
                    <div class="el-upload__tip" slot="tip">支持格式：.rar .zip .doc .docx .pdf ，单个文件不能超过20MB</div>
                    </el-upload>
                </div> -->
                <div class="payloader">
                    <p class="title">
                        <span class="starred">*</span>
                        <span class="text">接收范围：</span>
                    </p>
                    <div class="choice">
                        <el-radio v-model="form.radio" label="1"> 全体楼宇</el-radio>
                        <el-radio v-model="form.radio" label="2"> 指定楼宇</el-radio>
                    </div>
                </div>
                <div class="payloader">
                    <p class="title">
                        <span class="starred">*</span>
                        <span class="text">提醒方式：</span>
                    </p>
                    <div class="choice">
                        <el-radio v-model="form.radios" label="1">  系统消息</el-radio>
                        <el-radio v-model="form.radios" label="2">  短信通知</el-radio>
                    </div>
                </div>
                <div class="payloader">
                    <p class="title">
                        <span class="starred">*</span>
                        <span class="text">发布人：</span>
                    </p>
                    <el-input
                    placeholder="请输入发布人"
                    v-model="form.publisher"
                    clearable class="countent">
                    </el-input>
                </div>
            </div>
        </div>
        <!-- 添加房屋保存按钮 -->
        <div class="contentfooter">
            <el-button plain class="reseatebutton" @click="reseate">取消</el-button>
            <el-button type="primary" class="savebutton" @click="save">提交</el-button>
            
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            form:{
                Belongingcommunity:'',  //选择小区
                Noticetype:'',          //通知类型
                NotificationTitle:'',   //通知标题
                Noticecount:'',         //通知内容
                radio:'1',              //接收范围
                radios:'1',             //提醒方式
                publisher:'',           //发布人    
            },
            options: [{
            value: '选项1',
            label: '万象城'
            }, {
            value: '选项2',
            label: '万达文旅城'
            }, {
            value: '选项3',
            label: '大卫城'
            }, {
            value: '选项4',
            label: '碧桂园'
            },],//下拉选项框选项
            optionstype:[{
            value: '选项1',
            label: '停水充值'
            }, {
            value: '选项2',
            label: '停电充值'
            }, {
            value: '选项3',
            label: '维修通知'
            }, {
            value: '选项4',
            label: '停气充值'
            },],    //通知类型
        }
    },
    methods:{
        // 添加房屋底部保存 重置按钮
        save(){
            console.log("提交",this.form)
            if(this.$route.query.data){
                this.$axios.post('http://127.0.0.1/noticeupdate',{
                    ...this.form,
                    id:this.$route.query.data.notice_id
                }).then(res=>{
                    console.log(res)
                    this.$message({
                        message: '恭喜你，数据修改成功',
                        type: 'success'
                    });
                    this.$router.go(-1)
                }).catch(err=>{
                    console.log(err)
                })
            }else{
                this.$axios.post('http://127.0.0.1/noticeinsert',{
                    ...this.form
                }).then(res=>{
                    console.log(res.data)
                    this.$message({
                        message: '恭喜你，数据添加成功',
                        type: 'success'
                    });
                    this.$router.go(-1)
                }).catch(err=>{
                    console.log(err)
                })
            }
            
        },
        reseate(){
            console.log("取消",this.form)
            
        },
        back(){
            this.$router.go(-1)
        },
        save(){
            this.form=''
        }
    },
    mounted(){
        // fetch("http://127.0.0.1/user/all").then(res=>res.json()).then(res1=>{
        //     console.log(res1)
        // }).catch(err=>{
        //     console.log(err)
        // })
        if(this.$route.query.data){
            console.log(this.$route.query.data)
            this.form=this.$route.query.data
            this.form.radio=this.$route.query.data.Acceptancescope=='全体楼宇'?'1':'2'
            this.form.radios=this.$route.query.data.Remindermethod=='系统消息'?'1':'2'
        }
    }
}
</script>

<style lang="scss" scoped>
    .Addahouse{
        width: 1260px;  /* 最大1265px */ 
        margin: auto;
        height: 80vh;
        overflow: scroll;
        scrollbar-width: none;
        background-color: #fff;
        border: 1px solid rgba(233, 233, 233, 1);
        // 添加房屋标题
        .AddCommunitytitle{
            height: 60px;
            padding: 0 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid rgba(242, 242, 242, 1);
            & p:nth-child(1){
                color: #666666;
                font-size: 16px;
                font-family: 'Font Awesome 5 Pro Solid', 'Font Awesome 5 Pro';
                font-weight: 900;
                font-style: normal;
                height: 28px;
                line-height: 28px;
                cursor: pointer;
                .el-icon-arrow-left{
                    font-size: 16px !important;
                    color: #666666;
                    font-weight: 900 !important;
                }
            }
            & p:nth-child(2){
                color: #999;
                font-size: 12px;
                .must{
                    color: #FF3B30;
                    margin-right: 5px;
                }
            }
        }
        // 添加房屋输入框内容板块
        .Addahousecontent{
            width: 100%;
            padding: 40px 60px 40px 40px;
            box-sizing: border-box;
            background-color: #fff;
            border-bottom: 1px solid rgba(242, 242, 242, 1);
            .middlecountent{
                margin-left: 100px;
                .payloaders{
                    width: 100%;
                    margin-bottom: 25px;
                    display: flex;
                    .title{
                        width: 120px;
                        padding-right: 20px;
                        font-size: 14px;
                        color: #666666;
                        box-sizing: border-box;
                        text-align: right;
                        .starred{
                            color: #FF3B30;
                        }
                    }
                    .textarea{
                        width: 840px;
                        height: 298px;
                        ::v-deep .el-textarea__inner{
                            width: 840px;
                            height: 298px;
                        }
                        ::v-deep .el-textarea__inner {
                            border-color: #C0C4CC !important;
                            resize: none;
                        }
                    }
                    ::v-deep .el-upload-dragger{
                        width: 120px;
                        height: 40px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        .el-icon-upload{
                            font-size: 20px !important;
                            margin: 0 10px 0 0 !important;
                        }
                    }
                    .el-upload__tip{
                        font-size: 14px;
                        color: #999;
                    }
                }
                .payloader{
                    width: 100%;
                    height: 40px;
                    margin-bottom: 25px;
                    display: flex;
                    align-items: center;
                    .title{
                        width: 120px;
                        padding-right: 20px;
                        font-size: 14px;
                        color: #666666;
                        box-sizing: border-box;
                        text-align: right;
                        .starred{
                            color: #FF3B30;
                        }
                    }
                    .note{
                        font-size: 14px;
                        color: #666666;
                    }
                    .countent{
                        width: 400px;
                        ::v-deep .el-input__inner:focus {
                            border-color: #C0C4CC !important;
                            outline: 0;
                        }
                    }
                    .housetype{
                        width: 400px;
                        display: flex;
                        align-items: center;
                        span{
                            font-size: 14px;
                            margin: 0 15px;
                            color: #666666;
                        }
                        .housetext{
                            width: 77px;
                        }
                        ::v-deep .el-input__inner:focus {
                            border-color: #C0C4CC !important;
                            outline: 0;
                        }
                    }
                    .datapicker{
                        width: 400px;
                        ::v-deep .el-input__inner:focus {
                            border-color: #C0C4CC !important;
                            outline: 0;
                        }
                    }
                    .storeid,.building{
                        width: 400px;
                            ::v-deep .el-input__inner {
                                border-color: #C0C4CC !important;
                            }
                    }
                    
                }
            }
            
            .Addahousecontenttop{
                width: 100%;
                display: flex;
                justify-content: space-between;
                .contenttopleft{
                     width: 520px;
                    margin-top: 30px;
                    
                }
            }
            .Addahousecontentbottom{
                width: 100%;
                background-color: #fff;
                 // 备注信息
                .notesinformation{
                    display: flex;
                    .title{
                        width: 120px;
                        padding-right: 20px;
                        font-size: 14px;
                        color: #666666;
                        box-sizing: border-box;
                        text-align: right;
                        white-space: nowrap;
                        .starred{
                            color: #FF3B30;
                        }
                    }
                    .textarea{
                        width: 1020px;
                        height: 175px;
                        ::v-deep .el-textarea__inner{
                            width: 1020px;
                            height: 175px;
                        }
                        ::v-deep .el-textarea__inner {
                            border-color: #C0C4CC !important;
                            resize: none;
                        }
                    }
                }
            }
            
        }
        //添加房屋底部按钮
        .contentfooter{
            width: 100%;
            box-sizing: border-box;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            .savebutton,.reseatebutton{
                width: 80px;
                height: 30px;
                padding: 0 !important;
                i{
                    margin-right: 5px;
                }
                ::v-deep span{
                    font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
                    font-weight: 700 !important;
                    font-style: normal;
                    font-size: 12px;
                }
            }
            .savebutton{
                margin-right: 40px;
                span{
                    color: #0079FE !important;
                }
            }
            .createbutton{
                width: 80px;
                height: 30px;
                i{
                    margin-right: 5px;
                }
                span{
                    color: #fff;
                }
            }
            .el-button--primary{
                background-color: rgba(0, 121, 254, 1);
            }
            .el-button--primary:hover {
                background: #3394fe !important;
                border-color: #3394fe !important;
                color: #FFF !important;
            }
            .el-button.is-plain{
                border-color: rgba(0, 121, 254, 1);
                color: rgba(0, 121, 254, 1);
            }
            .el-button.is-plain:hover {
                background: #FFF !important;
                border-color: #409EFF;
                color: #409EFF !important;
            }
        }
    }
</style>